<template>
  <div class="Ranking" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name"><div class="content">飞行类型排行</div></div>
      <el-tooltip effect="dark" content="收起" placement="top">
        <img
          src="/img/cockpit/closeArrow.png"
          alt=""
          class="closeArrow"
          @click.stop="closeRight"
        />
      </el-tooltip>
    </div>
    <div class="card">
      <div class="noAvailable" v-if="isNoData">暂无数据</div>
      <dic
        id="myechart"
        v-else
        :class="{ isSingle: !showHead, isSmall: isSmall }"
      ></dic>
      <div class="controlBtn">
        <div
          v-for="item in btnList"
          :key="item.dictValue"
          :class="item.dictValue === isClick ? 'btnAloneClick' : 'btnAlone'"
          @click="clickHandle(item)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Ranking",
};
</script>

<script setup>
import * as echarts from "echarts";
import { computed, onMounted } from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import { getTaskRankingDate } from "@/api/cockpit/ranking";
import { defineProps } from "vue";
import { getDictionary } from "@/api/system/dict/type";

const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});
const isClick = ref("total");
const btnList = ref([]);

const clickHandle = (val) => {
  isClick.value = val.dictValue;
  // cockpitStore.getExecuteData(val.dictValue);
  xdata = [];
  ydata = [];
  initEchart(val.dictValue);
};

const getListType = () => {
  getDictionary("aircraft_type").then((data) => {
    if (data.code === 200) {
      btnList.value = data.data;
      btnList.value.unshift({
        dictLabel: "全部",
        dictValue: "total",
      });
      initEchart("total");
    }
  });
};

let xdata = [];
let ydata = [];

const isNoData = ref(false);

// 设置图标option
const setOption = () => {
  return {
    backgroundColor: "transparent",
    tooltip: {
      show: false,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "3%",
      top: "13%",
      containLabel: true,
    },
    xAxis: {
      data: xdata,
      triggerEvent: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#90CEFF",
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        // rotate: 45,
        formatter: function (value) {
          if (value.length > 4) {
            return value.substring(0, 4) + "...";
          } else {
            return value;
          }
        },
        margin: 12,
        textStyle: {
          fontSize: 10,
          fontFamily: "PingFang SC",
          fontWeight: 400,
          color: "#90CEFF",
        },
      },
    },
    yAxis: [
      {
        // interval: 5,
        splitNumber: 4,
        triggerEvent: true,
        nameTextStyle: {
          color: "rgba(255,255,255,1)",
          fontSize: 14,
          padding: [0, 0, 10, -20],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#0a3e98",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          show: false, // 隐藏 y 轴分割线
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 14, // 设置字体大小
            fontFamily: "PingFang SC", // 设置字体家族
            fontWeight: 300, // 设置字体粗细
            color: "#FFFFFF", // 设置颜色
            opacity: 0.1, // 设置透明度
          },
        },
      },
      {
        type: "category",
        show: false,
        data: ydata,
      },
    ],
    series: [
      {
        name: "飞行类型排行",
        barMinHeight: 10,
        type: "pictorialBar",
        barCategoryGap: "60%",
        symbol: "triangle",
        itemStyle: {
          // normal: {
          //   color: "#115790", // 设置背景颜色
          //   opacity: 0.15, // 设置透明度
          // },
          normal: {
            barBorderRadius: 5,
            //渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: "rgba(14, 255, 184,0.3)",
              },
              {
                offset: 0,
                color: "#15BEBF",
              },
            ]),
          },
        },
        barWidth: 35, // 设置宽度
        label: {
          normal: {
            show: true, // 显示标签
            position: "top", // 标签位置在柱状图顶部
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: 500,
            },
          },
        },
        data: ydata,
        z: 10,
      },
      {
        yAxisIndex: 1,
        itemStyle: {
          show: false,
          color: "transparent",
          opacity: 1, //透明度
        },
        showBackground: true,
        data: ydata, //这个数据无所谓，反正不显示，只要data的长度和另外两个一样长就行了
        barWidth: 45,
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(6, 40, 75,0.4)" },
            { offset: 1, color: "rgba(6, 40, 75,0.4)" },
          ]),
        },
        zlevel: -1,
        tooltip: {
          show: false,
          trigger: "axis",
          type: "none",
        },
        type: "bar",
      },
    ],
  };
};

async function initEchart(parentAircraftType) {
  const res = await getTaskRankingDate({ parentAircraftType });
  res.data.forEach((item) => {
    xdata.push(item.taskNature);
    ydata.push(item.number);
  });
  let chart = echarts.init(document.getElementById("myechart"));
  chart.setOption(setOption());
}

const emits = defineEmits(["closeRight"]);

const closeRight = () => {
  emits("closeRight");
};

onMounted(() => {
  getListType();
  // initEchart();
});
</script>

<style scoped lang="scss">
.Ranking {
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .name {
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;
      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .closeArrow {
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      top: -9px;
      right: 10px;
      cursor: pointer;
    }
  }

  .card {
    position: relative;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    .noAvailable {
      font-size: 16px;
      color: #909399;
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #myechart {
      width: 320px;
      height: 145px;
    }
    #myechart.isSingle {
      width: 450px;
    }
    #myechart.isSmall {
      width: 320px;
    }

    .controlBtn {
      // position: absolute;
      width: 100px;
      height: 170px;
      padding-top: 1%;
      // left: 3%;

      .btnAlone {
        width: 68px;
        height: 26px;
        border: 1px solid #023b41;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
      }

      .btnAloneClick {
        width: 68px;
        height: 26px;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
        border: 1px #00e0f8 solid;
        color: #00ecfb;
      }
    }
  }
}
</style>
